<script setup lang="ts">
import router from '@/router'
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores/user'
import type { IUser } from '@/types'

/**
 * 表单数据对象
 */
let registerFormRef = ref<IUser>()
let registerForm = reactive<IUser>({
  phone: '',
  nickname: '',
  password: '',
  password2: ''
})

//自定义校验规则: 二次确认密码
const validateCheckPassword = (rule: any, value: any, callback: any) => {
  if (value !== registerForm.password) {
    callback(new Error('两次密码输入不一致!'))
  } else {
    callback() //校验通过
  }
}
//校验规则
const registerRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],

  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '密码长度在6到16个字符', trigger: 'blur' }
  ],
  password2: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: validateCheckPassword, trigger: ['blur', 'change'] } //自定义校验规则
  ]
}
/**
 * 注册点击事件
 */
const userStore = useUserStore()

const handleRegister = (formRef: any) => {
  formRef.validate((valid: boolean) => {
    if (valid) {
      //TODO: 写入用户信息
      userStore.register(registerForm)
      routeReady()
    } else {
      console.log('注册失败')
    }
  })
}

/**
 * 跳转提示弹窗
 */
let dialogVisible = ref(false)
const routeReady = () => {
  dialogVisible.value = true
  setTimeout(() => {
    router.push({
      path: '/login'
    })
  }, 1000)
}
</script>

<template>
  <div class="login-view">
    <el-form
      ref="registerFormRef"
      status-icon
      :model="registerForm"
      :rules="registerRules"
      label-width="80px"
      class="login-panel"
    >
      <h2 class="login-title">欢迎注册多西柚</h2>
      <el-form-item label="手机号" prop="phone">
        <el-input
          autocomplete="off"
          placeholder="请输入手机号"
          class="register-input"
          v-model="registerForm.phone"
        />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input
          autocomplete="off"
          placeholder="请输入昵称"
          class="register-input"
          v-model="registerForm.nickname"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          autocomplete="off"
          placeholder="请输入密码"
          type="password"
          v-model="registerForm.password"
          class="register-input"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="password2">
        <el-input
          autocomplete="off"
          placeholder="请再次输入密码"
          type="password"
          v-model="registerForm.password2"
          class="register-input"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleRegister(registerFormRef)" class="register-input"
          >注册</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 跳转提示 -->
    <el-dialog v-model="dialogVisible" width="30%" fullscreen center>
      <el-result icon="success" title="注册成功" sub-title="1秒后自动跳转到登录页面" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.register-input {
  width: 260px;
}
</style>
